$(function () {
  //封装函数 在文章分类列表数据那到后 再渲染修改页面内容
  function initForm () {
    //获取id
    let id = location.href.split('=')[1]
    //发送ajax
    axios({
      url:'/my/article/' + id
    }).then(res=>{
      //成功回调
      let {
        data: { status, data, message }
      } = res
      if (status != 0) {
        return layui.layer.msg(message)
      }
      console.log(data)
      //layui form.val方法渲染页面信息
      layui.form.val('formTest',data)
      //由于是插件异步渲染富文本页面 防止收到数据时页面还没渲染好 添加定时器延迟数据渲染
      setTimeout(function(){
        // 富文本编辑器 如果当前页面只有一个编辑器 设置内容
        tinyMCE.activeEditor.setContent(data.content)
      },500)
      // 插件渲染封面单独赋值 
      //图片路径需要添加根路径：
      let url = 'http://api-breakingnews-web.itheima.net' + data.cover_img
      $('#image')
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', url) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
    })

  }


  //需求1. 初始化渲染文章分类列表
  initArtCateList()

  // 后面要使用 建议封装
  function initArtCateList () {
    //发送ajax
    axios({
      url: '/my/article/cates'
    }).then(res => {
      //成功回调
      let {
        data: { status, data, message }
      } = res
      if (status != 0) {
        return layui.layer.msg(message)
      }
      let arr = [`<option value="">请选择文章所属分类</option>`]
      data.forEach(ele => {
        if (ele.Id < 0) return
        arr.push(`<option value="${ele.Id}">${ele.name}</option>`)
      })
      //循环结束赋值
      $('select')
        .empty()
        .html(arr.join(''))
      layui.form.render()
      // 文章列表 渲染后 调用页面渲染函数
      initForm ()
    })
  }

  // 需求2. 初始化富文本编辑器
  initEditor()

  //需求3. 初始化图片裁剪器
  // 3.2. 裁剪选项
  let options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3.3. 初始化裁剪区域
  $('#image').cropper(options)

  //需求4. 点击按钮,添加文章状态
  let state
  $('#btn1').click(function () {
    state = '已发布'
  })
  $('#btn2').click(function () {
    state = '草稿'
  })

  //需求5. 文章封面
  $('#btnFile').click(function () {
    $('#fileBtn').click()
  })

  $('#fileBtn').on('change', function (e) {
    // 1. 拿到用户选择的文件
    let file = e.target.files[0]
    // 2. 选择文件非空校验
    if (!file) {
      return layui.layer.mgs('文章封面不能为空')
    }
    // 3. 根据选择的文件，创建一个对应的 URL 地址：
    let newImgURL = URL.createObjectURL(file)
    console.log(newImgURL)
    // 4. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
    $('#image')
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  })

  //需求6. 修改文章发布事件
  $('#formEdit').on('submit', function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    //  添加文章状态
    fd.append('state', state)
    console.log(...fd)
    $('#image')
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        // 将 Canvas 画布上的内容，转化为二进制文件对象
        // 得到文件对象后，进行后续的操作
        fd.append('cover_img',blob)
        /* 图片是异步操作 ajax 发送请求写在图片后面 防止图片数据未生成 整体数据已发送
        发送ajax 两种方法 1.jq中的ajax  2.axios */
        // 方法一 jq中的ajax
        $.ajax({
            url:'http://api-breakingnews-web.itheima.net/my/article/edit',
            type:'post',
            data:fd,
            headers:{
                Authorization:localStorage.getItem('token') 
            },
            // FormData 类型在jq中需要设置两个false
            contentType:false,//jq中有默认值 FormData不需要默认值
            processData:false,//jq中有默认值 FormData不需要默认值
            success: function(res){
                if (res.status != 0) {
                    return layui.layer.msg(res.message)
                }
                layui.layer.msg(state=='已发布'?'恭喜您,文章修改成功':'存为草稿成功')
                setTimeout(function(){
                  window.parent.document.querySelector('#art_list').click()
                },1500)
            }
        })

        //方法二 axios
        // axios({
        //     url:'/my/article/add',
        //     method:'post',
        //     data: fd
        // }).then(res=>{
        //     //成功回调
        //     let {
        //         data: { status,message }
        //       } = res
        //     if (status != 0) {
        //         return layui.layer.msg(message)
        //     }
        //     layui.layer.msg(state=='已发布'?'恭喜您,文章发布成功':'存为草稿成功')
        //     setTimeout(function(){
        //        window.parent.document.querySelector('#art_list').click()
        //     },1500)
        // })
      })
  })
})
